<template>
  <div class="home">
    <!-- 头部 -->
    <Header></Header>
    <!-- 体部 -->
    <div class="content">
      <div class="wrapper">
        <!-- 轮播图 -->
        <div class="swiper">
          <!-- 跑马灯 插件 -->
          <el-carousel height="360px">
            <!-- 循环遍历swipers数组 显示对应的数据 -->
            <el-carousel-item v-for="item in swipers"
                              :key="item.id">
              <img :src="item.url"
                   alt=""
                   height="360px">
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 板块 -->
        <div class="plates">
          <div class="plate"
               v-for="item in plateData"
               :key="item.id">
            <!-- 顶部 -->
            <div class="header"
                 @click="toList(item.category)">
              <div class="title">{{item.category.name}}</div>
              <div class="more"
                   @click="toList(item.category)">更多&gt;&gt;</div>
            </div>
            <ul class="list"
                v-if="item.aritcle.length > 0 && item.category.id === 3">
              <li @click="toArticle(artItem)"
                  v-for="artItem in item.aritcle"
                  :key="artItem.id">
                {{artItem.title}}
              </li>
              <!-- 跑马灯 插件 -->
              <el-carousel height="240px"
                           style="width: 420px;
                                  float: left;
                                  margin-left: 360px;
                                  margin-top: -140px;">
                <!-- 循环遍历swipers数组 显示对应的数据 -->
                <el-carousel-item v-for="Item in item.aritcle"
                                  :key="Item.id">
                  <img :src="Item.cover"
                       alt=""
                       height="240px"
                       width="420px"
                       @click="toArticle(Item)">

                </el-carousel-item>
              </el-carousel>
            </ul>
            <ul class="list"
                v-else-if="item.aritcle.length > 0 && item.category.id !== 3">
              <li @click="toArticle(artItem)"
                  v-for="artItem in item.aritcle"
                  :key="artItem.id">
                {{artItem.title}}
              </li>
            </ul>
            <ul class="list"
                v-else>
              <li>暂无数据</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
// 1.引入axios的get请求
import { get } from '../utils/request'
// 引入Header组件
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
  // 注册组件
  components: {
    // 1.引入所需的组件
    // 2.注册
    // Header:Header,
    // 在ES6中 如果key value同名 直接写一个属性就可以了
    Header,
    Footer
  },
  data () {
    return {
      // 轮播图的数据
      swipers: [],
      // 板块数据
      plateData: {},
      artCover: {},
    }
  },
  methods: {
    // 2.发送请求获取对应的数据
    // 获取轮播图的数据
    getSwipersData () {
      // 发送get请求
      get('/index/carousel/findAll').then(res => {
        // console.log(res.data);
        // 赋值
        this.swipers = res.data
      })
    },
    // 获取板块所需的数据
    getPlateData () {
      get('/index/article/findCategoryArticles').then(res => {
        // console.log(res.data);
        this.plateData = res.data
        this.artCover = res.data.aritcle
        // console.log(res.data.aritcle);
        // console.log(this.artItem);
      })
    },
    toList (category) {
      // 路由跳转
      this.$router.push({
        // 要跳转的路径
        path: '/list',
        // 要传递的参数
        query: category
      })
    },
    // 跳转到文章页面
    toArticle (artItem) {
      this.$router.push({
        path: '/article',
        query: artItem
      })
    },
  },
  created () {
    // 3.页面加载时自执行获取轮播图数据的方法 发送请求
    this.getSwipersData()
    // 自动获取板块数据
    this.getPlateData()
  },
};
</script>

<style lang="scss" scoped>
// 体部样式
.content {
  // background-color: #ecf6f2;
  .wrapper {
    // 轮播图样式
    .swiper {
      margin-top: 0.5em;
      img {
        width: 100%;
      }
    }
    // 板块区域
    .plates {
      // background-color: white;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      padding: 10px;
      // 每一个板块的样式
      .plate {
        background-color: #ecf6f2;
        border: 1px solid rgb(222, 219, 219);
        width: 30%;
        margin: 10px;
        padding: 10px;
        height: 340px;
        box-sizing: border-box;
        border-radius: 5px;
        // 板块头部样式
        .header {
          display: flex;
          justify-content: space-between;
          .title {
            color: #31499a;
            font-size: 18px;
            font-weight: bold;
          }
          .more {
            color: #999;
            margin-top: 3px;
          }
        }
        // 板块列表样式
        .list {
          margin-top: 15px;
          li {
            line-height: 2em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
          }
        }
      }
      .plate:first-child {
        width: 63%;
        .list {
          li {
            width: 40%;
          }
        }
      }
    }
  }
}
</style>